<template>
  <view>
    <view class="content">
      <uni-forms :model="form" :rules="rules" ref="formRef">
        <!-- 表单内容 -->
        <uni-forms-item class="form-item" name="receiver">
          <text class="label">收货人</text>
          <input
            class="input"
            placeholder="请填写收货人姓名"
            v-model="form.receiver"
          />
        </uni-forms-item>
        <uni-forms-item class="form-item" name="contact">
          <text class="label">手机号码</text>
          <input
            class="input"
            placeholder="请填写收货人手机号码"
            v-model="form.contact"
          />
        </uni-forms-item>
        <uno-forms-item class="form-item" name="fullLocation">
          <text class="label">所在地区</text>
          <picker
            class="picker"
            mode="region"
            :value="form.fullLocation.split(' ')"
            @change="onRegionChange"
          >
            <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
            <view v-else class="placeholder">请选择省/市/区(县)</view>
          </picker>
        </uno-forms-item>
        <uni-forms-item class="form-item" name="address">
          <text class="label">详细地址</text>
          <input
            class="input"
            placeholder="街道、楼牌号等信息"
            v-model="form.address"
          />
        </uni-forms-item>
        <uni-forms-item class="form-item">
          <label class="label">设为默认地址</label>
          <switch
            class="switch"
            color="#27ba9b"
            :checked="form.isDefault === 1"
            @change="onSwitchChange"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @click="submit">保存并使用</button>
  </view>
</template>

<script>
import {
  postMemberAddressAPI,
  getMemberAddressByIdAPI,
  putMemberAddressByIdAPI,
} from "@/services/address";
export default {
  onLoad(query) {
    uni.setNavigationBarTitle({
      title: query.id ? "修改地址" : "新增地址",
    });
    // 有 id 才调用接口
    if (query.id) {
      this.id = query.id;
      this.getMemberAddressByIdData(query.id);
    }
  },
  data() {
    return {
      id: "",
      form: {
        receiver: "", // 收货人
        contact: "", // 联系方式
        fullLocation: "", // 省市区(前端展示)
        provinceCode: "", // 省份编码(后端参数)
        cityCode: "", // 城市编码(后端参数)
        countyCode: "", // 区/县编码(后端参数)
        address: "", // 详细地址
        isDefault: 0, // 默认地址，1为是，0为否
      },
      rules: {
        receiver: {
          rules: [{ required: true, errorMessage: "请输入收货人姓名" }],
        },
        contact: {
          rules: [
            { required: true, errorMessage: "请输入联系方式" },
            {
              pattern: "^1[3456789]\\d{9}$",
              errorMessage: "请输入正确的手机号码",
            },
          ],
        },
        fullLocation: {
          rules: [{ required: true, errorMessage: "请选择所在地区" }],
        },
        address: {
          rules: [{ required: true, errorMessage: "请选择详细地址" }],
        },
      },
    };
  },
  methods: {
    //收集所在地区
    onRegionChange(e) {
      console.log(e);
      this.form.fullLocation = e.detail.value.join(" ");
      //省市区
      const [provinceCode, cityCode, countyCode] = e.detail.code;
      //合并
      Object.assign(this.form, { provinceCode, cityCode, countyCode });
    },
    // 收集是否默认收货地址
    onSwitchChange(ev) {
      this.form.isDefault = ev.detail.value ? 1 : 0;
    },
    // 根据 id 获取地址数据
    async getMemberAddressByIdData(id) {
      // 有 id 才调用接口
      const res = await getMemberAddressByIdAPI(id);
      // 把数据合并到表单中
      this.form = res.result;
    },

    //提交
    async submit() {
      try {
        //表校验
        const res = await this.$refs.formRef.validate();
        console.log(res);
        if (this.id) {
          // 修改地址请求
          await putMemberAddressByIdAPI(this.id, this.form);
        } else {
          // 新建地址请求
          const { fullLocation, ...data } = this.form;
          await postMemberAddressAPI(data);
        }

        // 成功提示
        uni.showToast({
          icon: "success",
          title: this.id ? "修改成功" : "添加成功",
        });
        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 400);
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
